I'm putting together a component that is supposed to retrieve all users from the DB, which it does - the problem is that it doesn't stop, and retrieves data from the DB endlessly until the app crashes and unsurprisingly gives the error in the title.

Here is the code in question:

const Dashboard = () => {
      const [usersList, setUsersList] = useState([]);
const userRef = query(ref(db, '/Users'));
onValue(userRef, (snapshot) => {
    let userlist = [];
    snapshot.forEach((snap) => {
        userlist.push(snap.toJSON());
    });
    setUsersList(userlist);
    

}, {
    onlyOnce: true
});
return(
    <div>
    {usersList.map(data => {
        return (
                    <div class="profile_info">
                        {data.name}
                    </div>
        );
    })}
    </div>
)
}

To reiterate, it will provide a list of names as expected, but after a few moments it will crash, providing the "InternalError: too much recursion" error. I've done some troubleshooting on my own prior to posting the question and have narrowed it down to the process of sticking all the data in a temporary array and then setting that array into state being responsible, but everything I've seen online about this process seems to point to that being the proper way to do what I'm trying to do, and so I'm feeling stuck.